<script lang="ts" setup>
import {
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { getbxjkxllmList, getdslmList, getgblmList, getsqbxjkList, getsxrbList } from '~/api/home'
import { getImgUrl } from '~/composables/global'
import { decode, encode } from '~/utils/base/dataEncry'

const list = ref<any[]>([])
const list1 = ref<any[]>([])
const list2 = ref<any[]>([])
const list3 = ref<any[]>([])
const list4 = ref<any[]>([])
const videoList = ref<any[]>([])
// const queryParams = reactive(
//     {
//         page: {
//             rownumber: 3,
//             pageNo: 1,
//         },
//         positions: '首页'
//     },
// )
const queryParams1 = reactive(
  {
    page: {
      rownumber: 6,
      pageNo: 1,
    },
    positions: '首页',
  },
)
const queryParams2 = reactive(
  {
    page: {
      rownumber: 7,
      pageNo: 1,
    },
    positions: '首页',
  },
)
const queryParams = reactive(
  {
    page: {
      rownumber: 1,
      pageNo: 1,
    },
    condition: [],
    positions: '首页',
  },
)
function getData() {
  getsxrbList(queryParams).then((res) => {
    list.value = res.data
  }).catch(() => {
  })
  getsqbxjkList(queryParams).then((res) => {
    list1.value = res.data
  }).catch(() => {
  })
  getbxjkxllmList(queryParams).then((res) => {
    list2.value = res.data
  }).catch(() => {
  })

  getgblmList(queryParams1).then((res) => {
    list3.value = res.data
  }).catch(() => {
  })
  getdslmList(queryParams2).then((res) => {
    list4.value = res.data.slice(0, 1)
    videoList.value = res.data.slice(1, 7)
  }).catch(() => {
  })
}
onMounted(() => {
  getData()
})
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}
function toList() {
  navigateTo({
    path: `/peopleHealth/peopleHealthSeries`,
    query: {
    },
  })
}
function toDetail(item, type) {
  if (type === '百姓健康系列栏目/电视栏目') {
    type = '电视栏目'
  }
  navigateTo({
    // path: `/peopleHealth/peopleHealthSeriesDetail/${type}`,
    path: `/peopleHealth/peopleHealthSeriesDetail/${item.id}`,
    query: {
      type,
      // data: encode(item),
    },
  })
}
const qrcodeList = [
  {
    label: '抖音',
    // url: 'https://videodocument1.obs.cn-north-9.myhuaweicloud.com/health/20240124/20240124091623745065.png',
    url: '/img/douyin.png',
  },
  // {
  //   label: '微博',
  //   url: 'http://videodocument1.obs.cn-north-9.myhuaweicloud.com/health/20240124/20240124091647819157.png',
  // },
  {
    label: '公众号',
    // url: 'http://videodocument1.obs.cn-north-9.myhuaweicloud.com/health/20240124/20240124091733319226.png',
    url: '/img/gzh.png',

  },
  {
    label: '视频号',
    url: '/img/sph.png',
  },
]
</script>

<template>
  <NuxtLink class="bxjklm flex cursor-pointer items-center justify-center" to="/peopleHealth/peopleHealthSeries" target="_blank">
    <img src="/img/bxjkbanner.jpg">
  </NuxtLink>
  <!-- <ClientOnly>
    <div class="min-h-280 bg-#FFF">
      <div class="flex items-end justify-center pt-30px">
        <span class="mr-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
        <span class="px-2 font-bold" text="#1D2128 22px">百姓健康系列栏目</span>
        <span class="ml-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
      </div>
      <div class="flex justify-center font-black font-serif -mt-10px" text="#031D2822 26px">
        PEPLE'S HEALTH
      </div>
      <div class="flex justify-between px-60 py-6">
        <div class="w-100% flex flex-col 2xl:flex-row 2xl:justify-between">
          <div class="mb-20px w-full 2xl:mb-0 2xl:w-55%">
            <div class="mb-10px flex justify-between">
              <div
                text="#1D2128 16px" class="pt-2 font-bold font-sans"
                style="border-bottom:5px solid #35B389"
              >
                报纸专刊
              </div>
              <div>
                <el-button color="#35B389" plain @click="toList()">
                  更多
                </el-button>
              </div>
            </div>
            <div class="" grid="~ cols-3 gap-10px">
              <div
                v-for="item in list" :key="item.id"
                border="1px solid #ccc"
                class="flex flex-col cursor-pointer gap-5px p-10px"
                hover="text-#35B389"
                @click="toDetail(item, '《陕西日报》专版')"
              >
                <div class="demo-image__preview image-container h-300px flex items-center" @click.stop="">
                  <el-image class="h-100% w-100%" :src="getImgUrl(item.img_url, true)" :preview-src-list="[getImgUrl(item.img_url || '')]" alt="" />
                </div>
                <div class="flex flex-1 flex-col justify-end">
                  <div text="18px">
                    {{ item.periods }}
                  </div>
                  <div text="14px #AEAEB2" class="line-clamp-2 text-ellipsis" v-html="addControlsList(item.contents)" />
                  <div text="14px" class="flex pl-5px pt-2">
                    <span text="#333">详情</span> <img src="/img/more.png" alt="">
                  </div>
                </div>
              </div>
              <div
                v-for="item in list1" :key="item.id"
                border="1px solid #ccc"
                class="flex flex-col cursor-pointer gap-5px p-10px"
                hover="text-#35B389"
                @click="toDetail(item, '《三秦百姓健康》杂志')"
              >
                <div class="demo-image__preview image-container h-300px flex items-center" @click.stop="">
                  <el-image class="h-100% w-100%" :src="getImgUrl(item.cover_file_name, true)" :preview-src-list="[getImgUrl(item.cover_file_name)]" alt="" />
                </div>
                <div class="flex flex-1 flex-col justify-end">
                  <div text="18px">
                    {{ item.title_name }}
                  </div>
                  <div text="14px #AEAEB2 " class="line-clamp-3 text-ellipsis">
                    {{ extractTextFromPTags(item.contents) }}
                  </div>
                  <div text="14px" class="flex pl-5px pt-2">
                    <span text="#333">详情</span> <img src="/img/more.png" alt="">
                  </div>
                </div>
              </div>
              <div
                v-for="item in list2" :key="item.id" border="1px solid #ccc"
                class="flex flex-col cursor-pointer gap-5px p-10px"
                hover="text-#35B389"
                @click="toDetail(item, '《陕西老年健康报》专版')"
              >
                <div class="demo-image__preview image-container h-300px flex items-center" @click.stop="">
                  <el-image class="h-100% w-100%" :src="getImgUrl(item.img_url, true)" :preview-src-list="[getImgUrl(item.img_url)]" alt="" />
                </div>
                <div class="flex flex-1 flex-col justify-end">
                  <div text="18px">
                    {{ item.periods }}
                  </div>
                  <div text="14px #AEAEB2" class="line-clamp-2 text-ellipsis" v-html="addControlsList(item.contents)" />
                  <div text="14px" class="flex pl-5px pt-2">
                    <span text="#333">详情</span> <img src="/img/more.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full 2xl:w-40%">
            <div class="flex justify-between">
              <div
                text="#1D2128 16px" class="pt-2 font-bold font-sans"
                style="border-bottom:5px solid #35B389"
              >
                广播
              </div>
              <div>
                <el-button color="#35B389" plain @click="toList()">
                  更多
                </el-button>
              </div>
            </div>
            <div
              v-for="item in list3" :key="item.id"
              class="flex cursor-pointer justify-between py-10px"
              hover="text-#35B389" text="14px"
              @click="toDetail(item, '广播栏目')"
            >
              <div class="line-clamp-1 w-80% flex items-center text-ellipsis text-18px">
                <i class="i-carbon:dot-mark mr-10px text-16px text-#999999" />
                <span>
                  {{ item.title_name }}

                </span>
              </div>
              <div text="#C7C7CC">
                [{{ item.release_time.split(' ')[0] }}]
              </div>
            </div>
            <div grid="~ cols-3 gap-x-20px" class="text-center xl:w-[max-content]">
              <div
                v-for="(item, index) in qrcodeList"
                :key="item.label"
                class="demo-image__preview image-container w-full px-20px pt-10px transition-all xl:w-115px"
                hover=" scale-105 translate-y--5px shadow"
                border="1px solid #ccc"
              >
                <el-image
                  class="w-full"
                  :src="item.url"
                  :preview-teleported="true"
                  :preview-src-list="qrcodeList.map(item => item.url)"
                  :initial-index="index"
                />
                <span class="inline-block line-height-30px">{{ item.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-60">
        <div class="flex justify-between">
          <div text="#1D2128 16px" class="pt-2 font-bold font-sans" style="border-bottom:5px solid #35B389">
            电视节目
          </div>
          <div>
            <el-button color="#35B389" plain @click="toList()">
              更多
            </el-button>
          </div>
        </div>
        <div class="h-100 flex justify-between py-10px">
          <div v-for="item in list4" class="relative w-30% cursor-pointer" @click="toDetail(item, '电视栏目')">
            <div class="absolute left-42% top-45% h-60px w-60px flex rounded-full bg-[#0310109c]">
              <img src="/img/play.png" alt="">
            </div>
            <div
              class="font-blod absolute bottom-0% h-40px w-100% flex items-center truncate bg-[#0310109c] pl-5"
              text="#fff"
            >
              {{ item.title_name }}
            </div>
            <img class="h-100% w-100%" :src="item.cover_file_name" alt="">
          </div>
          <div class="grid grid-cols-3 w-68% gap-3">
            <div v-for="item in videoList" class="relative h-184px cursor-pointer" @click="toDetail(item, '电视栏目')">
              <div class="absolute left-42% top-45% h-40px w-40px flex rounded-full bg-[#0310109c]">
                <img src="/img/play.png" alt="">
              </div>
              <div
                class="font-blod absolute bottom-0% h-30px w-100% flex items-center truncate bg-[#0310109c] pl-5"
                text="#fff 14px"
              >
                {{ item.title_name }}
              </div>
              <img class="h-100% w-100%" :src="item.cover_file_name" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </ClientOnly> -->
</template>

<style scoped>
.bxjklm {
  /* background-image: url('img/bxjkbanner.jpg'); */
  width: 100%;
  /* background-repeat: no-repeat; */
  text-align: center;
  background-image: linear-gradient(90deg, #2ea683 0%, #2ea683 50%, #89dbc4 51%, #89dbc4 100%);
}
</style>
